<template>
  <div>
    <van-search :left-icon="getImageUrl2('images/input-search-icon.png')" v-model="keyword" :disabled="disabled" :shape="shape" :background="backgorund" :placeholder="placeholder" :show-action="showAction" @search="doSearch" @cancel="doCancel" @clear="clearInput" />
    <!-- <van-search :left-icon="getImageUrl2('images/input-search-icon.png')" v-model="keyword" :disabled="disabled" :shape="shape" :background="backgorund" :placeholder="placeholder" :show-action="showAction" @search="doSearch" @cancel="doCancel" @update:model-value="_debounce" /> -->
  </div>
</template>
<script setup>

import {ref,watch} from 'vue'
import {getImageUrl2} from '@/utils/index.js'
import {debounce} from 'lodash-es'
defineProps({
  placeholder:{
    type:String,
    default:'搜索商品'
  },
  backgorund:{
    type:String,
    default:'#fff'
  },
  shape:{
    type:String,
    default:'round'
  },
  disabled:{
    type:Boolean,
    default:false
  },
  showAction:{
    type:Boolean,
    default:false
  }
})
const emit = defineEmits(['doSearchEvent','doCancelEvent','contentChangeEvent','clearEvent'])
const keyword = ref('')
const doSearch = ()=>{
  emit('doSearchEvent',keyword.value)
}
const doCancel = ()=>{
  emit('doCancelEvent')
}

const contentChange = ()=>{
  emit('contentChangeEvent',keyword.value)
}
const clearInput = ()=>{
  emit('clearEvent')
}
const _debounce = debounce(contentChange,300)

watch(keyword,(newVal,oldVal)=>{
  _debounce()
})
</script>
<style lang="scss" scoped>
:deep(.van-search){
  padding: 0;
  height: 70px;
}
:deep(.van-field__control){
  text-indent: 22px;
  height: 70px;
}
</style>